<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>

<script>
test(function() {
    var width = 50;
    var height = 50;
    var offscreenCanvas1 = new OffscreenCanvas(width, height);
    var ctx1 = offscreenCanvas1.getContext('2d');
    var offscreenCanvas2 = new OffscreenCanvas(width, height);
    var ctx2 = offscreenCanvas2.getContext('2d');
    
    ctx2.fillStyle = 'rgba(12, 34, 56, 255)';
    ctx2.fillRect(0, 0, 10, 10);
    ctx1.fillStyle = 'rgba(24, 68, 108, 255)';
    ctx1.fillRect(0, 0, width, height);
    ctx1.globalCompositeOperation = 'source-in';
    ctx1.drawImage(offscreenCanvas2, 0, 0);

    var color = ctx1.getImageData(25, 25, 1, 1).data;
    assert_approx_equals(color[0], 0, 5);
    assert_approx_equals(color[1], 0, 5);
    assert_approx_equals(color[2], 0, 5);
    assert_approx_equals(color[3], 0, 5);

    color = ctx1.getImageData(5, 5, 1, 1).data;
    assert_approx_equals(color[0], 12, 5);
    assert_approx_equals(color[1], 34, 5);
    assert_approx_equals(color[2], 56, 5);
    assert_approx_equals(color[3], 255, 5);
}, 'Test globalCompositeOperation API on OffscreenCanvas');

</script>
